<template>
  <div class="inThreaters">
    <v-header></v-header>
    <spinner v-if="guodu"></spinner>
    <div v-if="!guodu" class="movies">
      <div class="movie clearfix" v-for="(item,index) in in_theaters.subjects" @click="showMovieMsg('/movie/' + item.id)">
        <div class="posts"><img class="img-responsive" :src="item.images.small"></div>
        <div class="intro">
          <h3>{{item.title}}</h3>
          <star :score="item.rating.average" cssClass="star"/>
          <p>{{item.rating.average}}分</p>
          <p>导演：{{item.directors[0].name}}</p>
          <p>主演：{{item.casts.map(cast => cast.name).join(",")}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import vHeader from './v-header/v-header.vue'
  import spinner from './spinner/spinner.vue'
  import star from './v-star/star.vue'
  import jsonp from 'jsonp'

export default {
    components: {
      'v-header': vHeader,
      'spinner': spinner,
      'star': star
    },
    data () {
      return {
        guodu: true,
        in_theaters: {}
      }
    },
    mounted () {
      let vm = this
      var url = 'https://api.douban.com/v2/movie/in_theaters'
      jsonp(url, function (err, data) {
        vm.guodu = false
        if (err) {
          console.log(err.message)
        } else {
          vm.in_theaters = data
          // console.log(data.subjects)
        }
      })
    },
    methods: {
      showMovieMsg (url) {
        this.$router.push(url)
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import url('../assets/common.css');
  .movies{
    overflow: auto;
    padding: 10px 20px;

    background-color: #eee;

    .movie{
      font-size: 14px;
      padding: 10px 0;
      border-bottom: 1px #aaa solid;

      cursor: pointer;
      position: relative;

      .posts{
        position: absolute;
        bottom: 10px;

        img {
          vertical-align: bottom;
        }
      }

      .intro{
        margin-left: 80px;

        padding: 0 10px;

        h3{
          margin: 10px 0;
          font-size: 20px;
        }
      }
    }
  }

  .star{
    margin: 5px 0;
  }
</style>
